<template>
  <div class="container-fans">
    <el-card>
      <div slot="header">
        <my-bread>粉丝管理</my-bread>
      </div>
      <!-- tabs组件 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="粉丝列表" name="list">
          <div class="fans-list">
            <!-- 细节：key只能设置 字符串或者数字  如果是json-bigint转换的对象，toString即可 -->
            <div class="fans-item" v-for="fans in fansList" :key="fans.id.toString()">
              <el-avatar :size="80" :src="fans.photo"></el-avatar>
              <p>{{fans.name}}</p>
              <el-button type="primary" plain size="mini">+ 关注</el-button>
            </div>
          </div>
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="changePager"
            :current-page="reqParams.page"
            :page-size="reqParams.per_page"
            :total="total"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="chart">
          <div ref="dom" style="height:400px;width:600px"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'fans-page',
  data () {
    return {
      // 当前激活的tab选项卡的name属性值
      activeName: 'chart',
      // 粉丝列表
      fansList: [],
      // 总条数
      total: 0,
      // 请求参数
      reqParams: {
        page: 1,
        per_page: 24
      }
    }
  },
  created () {
    this.getFansList()
  },
  mounted () {
    this.initBar()
  },
  methods: {
    // 初始化柱状图
    async initBar () {
      const myChart = echarts.init(this.$refs.dom)
      const option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // x轴坐标刻度
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            // x轴刻度对应数据
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }

      try {
        // 获取统计的数据 data.age 是粉丝的年龄分布数据 (接口不稳定，不行多刷新几次)
        const { data: { data } } = await this.$http.get('/statistics/followers')
        // arr1 是x轴刻度，arr2 是刻度对应数据
        const arr1 = []; const arr2 = []
        for (const key in data.age) {
          arr1.push(key)
          arr2.push(data.age[key])
        }
        // 修改option
        option.xAxis[0].data = arr1
        option.series[0].data = arr2
        // 根据option绘制
        myChart.setOption(option)
      } catch (e) {
        this.$message.error('网络繁忙，刷新下试试')
      }
    },
    // 分页函数
    changePager (np) {
      this.reqParams.page = np
      this.getFansList()
    },
    // 获取粉丝列表
    async getFansList () {
      const {
        data: { data }
      } = await this.$http.get('/followers', { params: this.reqParams })
      this.fansList = data.results
      this.total = data.total_count
    }
  }
}
</script>

<style scoped lang='less'>
// 粉丝列表样式
.fans-list {
  .fans-item {
    width: 100px;
    height: 150px;
    text-align: center;
    border: 1px dashed #ddd;
    padding-top: 5px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 20px;
    p {
      margin: 5px 0;
      font-size: 14px;
    }
  }
}
</style>
